<template>
	<view>
		<picker :value="index" :range="list" range-key="label" :disabled="disabled" @change="pickerChange">
			<view>{{list[index].label}}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value',  // 自定义prop属性
			event: 'change'    // 自定义它的触发方法名
		},
		props: {
			value: [String, Number],
			range: {
				type: Array,
				default() {
					return []
				}
			},
			disabled: {
				type: Boolean,
				default: false
			},
			emptyText: {
				type: String,
				default() {
					return this.$t('baseCommon.message.pleaseSelect', { title: '' })
				}
			}
		},
		watch: {
			value: {
				handler(value) {
					let index = this.list.findIndex(r => r.value == value)
					this.index = index === -1 ? 0 : index
				},
				immediate: true
			},
			range: {
				handler(value) {
					this.init()
				},
				immediate: true
			}
		},
		data() {
			return {
				index: 0,
				list: []
			}
		},
		methods: {
			init() {
				this.list = [{
					value: '',
					label: this.emptyText
				}]
				this.list = this.list.concat(this.range)
				
				let index = this.list.findIndex(r => r.value == this.value)
				this.index = index === -1 ? 0 : index
			},
			pickerChange(e) {
				this.index = e.target.value;
				this.$emit('change', this.list[this.index].value)
			}
		}
	}
</script>

<style>
</style>